<template>
  <div style="padding: 10px">
    <el-card>
      <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Itempage1",
  data() {
    return {}
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$root.echarts.init(document.getElementById('myChart'))
      var option = {
        title: {
          text: '各季度销量数量统计',
          subtext: '趋势图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ["第一季度", "第二季度", "第三季度", "第四季度"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          },
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      request.get("/goods/count-auther").then(res => {
        res.data.forEach(item => {
          option.series[0].data.push({name: item.author, value: item.count})
        })
        // 绘制图表
        myChart.setOption(option);
      })
    }
  }
}
</script>

<style scoped>

</style>